<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Smooth Streaming example, single videoElement</title>

    <script class="code" src="../../dist/dash.all.debug.js"></script>
    <!--dash.all.min.js should be used in production over dash.all.debug.js
        Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
    <!--<script src="../../dist/dash.all.min.js"></script>-->

    <!-- add mss package which is required to play Smooth Streaming streams -->
    <script class="code" src="../../dist/dash.mss.debug.js"></script>

    <style>
        video {
            width: 640px;
            height: 360px;
        }

        .inputForm div {
            margin-bottom: 10px;
        }

        label {
            width: 135px;
            display: inline-block;
        }

        input[type="text"] {
            width: 500px;
        }
    </style>
</head>

<body>
    <div class="inputForm">
        <div>
            <label>Stream Url: </label>
            <input class="code" type="text" id="streamUrl" value="http://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest">
        </div>
        <div>
            <label>License Server Url: </label>
            <input type="text" id="licenseServerUrl" value="">
        </div>
        <div>
            <input type="button" value="Load" onclick="loadStream()">
        </div>
    </div>
    <div>
        <video controls="true"></video>
    </div>

    <script class="code">
        function loadStream() {
            var streamUrl = document.getElementById('streamUrl').value;
            var licenseServerUrl = document.getElementById('licenseServerUrl').value;
            var protData = null;

            if (!streamUrl) {
                return;
            }

            // Create protection data in case a license server was provided
            if (licenseServerUrl) {
                protData = {
                    'com.widevine.alpha': {
                        serverURL: licenseServerUrl
                    }
                };
            }

            var video,
                player;

            player = dashjs.MediaPlayer().create();
            video = document.querySelector("video");
            player.initialize(); // initialize the MediaPlayer instance
            player.attachView(video); // tell the player which videoElement it should use
            player.setProtectionData(protData); // set protection data (sets license server when required)
            player.attachSource(streamUrl); // provide the manifest source
        }
    </script>
    <script src="../highlighter.js"></script>
</body>

</html>